.UCDChart { font-family: "微软雅黑" Arial; font-size: 12px; width: 100%; height: 100%; background: #F6F6F6;margin: 0; position: relative; }
.UCDChart.Circle, 
.UCDChart.CircleProcess { overflow:auto;}
.UCDChart * { padding: 0; margin: 0; overflow: visible; }
.UCDChart .infoLayer { width: 100%; overflow: hidden; text-align: center; top: 49%; position: absolute; z-index: 5; }
.UCDChart .Frags { background: #FFF; margin: 0; padding: 0; display: inline-block;  *display: inline;
 *zoom: 1;/*overflow: hidden;*/ white-space: nowrap; position: absolute; z-index: 2; border: 1px solid #9E9E9E;}
.UCDChart .Frags .item { position: absolute; border-radius: 5px; text-align: center; color: #ffffff; padding: 0; margin: 0; display: inline-block;  *display: inline;*zoom: 1;}
.UCDChart .Frags .item.selected { background-color: #EEE; }
.UCDChart .Frags .item label { position: absolute; top:0; color:#333; padding:0 4px; -webkit-transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; -o-transition: .3s ease-in-out; transition: .3s ease-in-out; transition-property: all; }
.UCDChart .Frags .item.hover label {color: #333; }
.UCDChart .Frags .item.hover { background-color: #0088cc !important; }
.UCDChart .Frags.select .item { background-color: #0088cc !important; }
.UCDChart .Frags .subItem.select { background-color: #0088cc !important; }
.UCDChart .Frags .item .subItem { /*position: absolute; */border-radius: 5px; padding: 0; margin: 0; /*overflow: hidden; display: inline-block;  *display: inline;
 *zoom: 1;*/}
.UCDChart .Frags .item .subItem.hover { background-color: #0088cc !important; }

.UCDChart.CSS3.vertical .Frags .item, 
.UCDChart.CSS3.vertical .Frags .item .subItem {
	transition-property: width;
	width: 0;
}

.UCDChart.CSS3 .Frags .item, 
.UCDChart.CSS3 .Frags .item .subItem {
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out;

  transition-property: height;
  height: 0;
}

.UCDChart.stack .Frags .item.stackRendered .subItem { transition-property: none !important; }


/*  以下坐标轴  */
.UCDChart .Cords { width: 100%; height: 100%;position: absolute; z-index: 1; }
.UCDChart .Cords .mainCord { position: absolute; border: 0;}
.UCDChart.vertical .Cords .mainCord { border: 0;}
.UCDChart .Cords .mainCord .dot { position: absolute; color: #9E9E9E; opacity: 0; padding: 4px;height: auto; text-align: center; transition:  .3s ease-in-out; transition-property: left, top, background, font, opacity; word-wrap: normal; white-space: nowrap; }
.UCDChart.vertical .mainCord .dot { width: 70px; text-align: right; border: 0;}
.UCDChart .mainCord .dot.selected {color:#333; }
/*y1轴*/
.UCDChart .Cords .yCord1 { position: absolute; border: 0;}
.UCDChart .Cords .yCord1 .dot { position: absolute; color: #9E9E9E; opacity: 0; padding: 4px; width: 40px; height: auto; text-align: right; transition:  .3s ease-in-out; transition-property: left, top, background, font, opacity; right: 5px;}
.UCDChart.process .Cords .yCord1 .dot{ padding-right:10px;}
.UCDChart.vertical .Cords .yCord1 .dot { text-align: center; }
/*y2轴*/
.UCDChart .Cords .yCord2 { position: absolute; border: 0;}
.UCDChart .Cords .yCord2 .dot { position: absolute; color: #9E9E9E; opacity: 0; padding: 4px; width: 40px; height: auto; text-align: left; transition:  .3s ease-in-out; transition-property: left, top, background, font, opacity; left: 5px; }
.UCDChart .Cords .yCord2 .dot.selected { font-weight: bold; color:#333; }
/*图例*/
.Cords * { padding: 0; margin: 0; }
.Cords .legend {min-height: 20px; position: absolute; bottom: 0; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
/*目标线等*/
.UCDChart .extend { width: 100%; height: 100%; margin: 0; padding: 0;border: 0; }
.UCDChart .extend .goal { opacity: 0.6; z-index: 10; position: absolute; padding: 0; margin: 0; height: 6px; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; pointer-events: none; }
.UCDChart .extend .goal * { padding: 0; margin: 0; position: absolute; left: 0; }
.UCDChart .extend .goal .dot { background-color: #900; width: 7px; height: 7px; border-radius: 3px }
.UCDChart .extend .goal .line { width: 100%;border-top: 1px dashed #900; height: 1px; }
.UCDChart.vertical .extend .goal .line { height: 100%; width: 1px;border-left: 1px dashed #900;}

/*start add 2013-11-8*/
.UCDChart.Complex .main { position:absolute; background: white; z-index: 2;border: 1px solid #9E9E9E;/*overflow: hidden;*/}
.UCDChart.Complex .main .Frags { background-color:transparent; }
.chartCross { position:absolute; display:none; background:#FFF; padding:10px; -webkit-border-radius:6px; border:1px solid #9E9E9E; z-index:1001; }
.UCDChart .operate { position:absolute; z-index:1000; }
.UCDChart .Cords .grid .item { position:absolute; background-color:#9E9E9E; }
.UCDChart .fagContent, .UCDChart .cordContent { position:absolute; }
.UCDChart .mainCord .cordRule .rule { position:absolute; border-left:1px solid #9E9E9E; height:5px; }
.UCDChart .yCord1 .cordRule .rule, .UCDChart .yCord2 .cordRule .rule { position:absolute; border-top:1px solid #9E9E9E; width:5px; }
.UCDChart.process .yCord1 .cordRule .rule.mainLine{width:10px;}
.UCDChart.process.vertical .yCord1 .cordRule .rule.mainLine{width:1px;}
.UCDChart.vertical .mainCord .cordRule .rule { border:none; border-top:1px solid #9E9E9E; width:5px; height:1px; }
.UCDChart.vertical .yCord1 .cordRule .rule { border:none; border-left: 1px solid #9E9E9E; height: 5px; width: 1px; }
.UCDChart.vertical .mainCord .cordText { width:78px; }
/*end add 2013-11-8*/

.UCDChart.Circle .Cords .legend, 
.UCDChart.CircleProcess .Cords .legend {right:0; top:0; bottom:auto; }
.UCDChart.Circle .Frags, 
.UCDChart.CircleProcess .Frags { background:none !important; border:none !important; text-align: left; }
.UCDChart .grid{position:absolute;z-index: -1;}
.UCDChart .grid .gLine{position:absolute; border-top:1px dotted #eaeaea; height:1px;}
.UCDChart .grid.gridY .gLine{border:none; border-left:1px dotted #eaeaea; width:1px;}
.UCDChart .grid.gridY .gLine.mainLine{border-left:1px dotted #D1D1D1;}
.UCDChart .grid .gLine.mainLine{ border-top-color:#D1D1D1}
.UCDChart.vertical .grid .gLine{border-left:1px dotted #CCC;width:1px;}
.UCDChart.vertical .grid.gridY .gLine{border-top:1px dotted #D1D1D1;height:1px;}
/*start 风格样式 2014-2-19*/
.chartCross.gray{background: #FFF; color:#000;border:1px solid #9E9E9E;}
.UCDChart.gray{background: transparent;}
.UCDChart.gray .Frags{background: #FFF;border: 0px solid #9E9E9E;border-top: none; border-bottom-width:1px; }
.UCDChart.gray .Frags .fragsContent{position:absolute;top: 0;left: 0;bottom: 0;right: 0;}
.UCDChart.Complex.gray .main{background: white;border: 0px solid #9E9E9E;border-bottom-width: 1px;}
.UCDChart.gray .Cords .mainCord .dot { color: #9E9E9E; }
.UCDChart.gray .mainCord .dot.selected { color: #666; }
.UCDChart.gray .Cords .yCord1 .dot { color: #9E9E9E; }
.UCDChart.gray .Cords .yCord2 .dot{color: #9E9E9E;}
.UCDChart.gray .Frags .item label{color: #9E9E9E;}
.UCDChart.gray .Frags .item.hover label{color: #666;}
.UCDChart.gray .Cords .legend .item{color: #9E9E9E;}
.UCDChart.gray .Cords .legend .item.select{color: #666;}
.UCDChart.gray .infoLayer{ color:#000;}

.chartCross.black{background: #140F10; color:#FFF;border:1px solid #2D2D2D;}
.UCDChart.black{background: #262626;}
.UCDChart.black .Frags{background: #222122;border: 0px solid #9E9E9E;border-top: none;border-bottom-width:1px;}
.UCDChart.black.timeLine .Frags{ background:#FFF !important;}
.UCDChart.Complex.black .main{background: #222122;border: 0px solid #9E9E9E;border-bottom-width: 1px;}
.UCDChart.black .Cords .mainCord .dot { color: #C6C6C6; }
.UCDChart.black .mainCord .dot.selected { color: #F9F9F9; }
.UCDChart.black .Cords .yCord1 .dot { color: #C6C6C6; }
.UCDChart.black .Cords .yCord2 .dot{color: #C6C6C6;}
.UCDChart.black .Frags .item label{color: #C6C6C6;}
.UCDChart.black .Frags .item.hover label{color: #F9F9F9;}
.UCDChart.black .infoLayer{ color:#FFF;}
.UCDChart .Frags .splitLine{ position:absolute; border-left:1px solid #E0E0E0;z-index: -1;}
/*end 风格样式 2014-2-19*/

.UCDChart.process .Cords .mainCord .dot {transition:none;}
.UCDChart.process .Frags{border:none;border-left: 1px solid #E8E8E8;overflow:inherit;background:none;}
.UCDChart.process.vertical .Frags{ border:none;border-bottom: 1px solid #E8E8E8;}

/*start 时间轴样式*/
.FragsZoom{position: absolute; border: 1px solid #E8E8E8; border-top-width:0;width: 100%;height: 100%;background: #fafafa;font-size:12px; font-family:"微软雅黑";}
.FragsZoom .zoomLeft,.FragsZoom .zoomRight {position: absolute;/*background: #CCD1D9;*/z-index: 3;opacity: 0.4;width:200px; height:100%;background: url(../images/timeline/bg.png) repeat-x;}
.FragsZoom.black .zoomLeft,.FragsZoom.black .zoomRight{background: #222122;}
.FragsZoom .zoomCenter{position: absolute;z-index: 3; height:100%; cursor:pointer;}
.FragsZoom .zoomLeft{ left:0;}
.FragsZoom .zoomRight{ right:0;}
.FragsZoom .zoomContent{width: 100%;height: 100%;}

.FragsZoom .zoomContent .text{ color:#aab2bd;}
.FragsZoom .splitLeft{background:url(../images/timeline/splitCenterL.png) repeat-y;width:5px; height:100%;position: absolute;left:196px;z-index: 4; cursor:e-resize;}
.FragsZoom .splitRight{background:url(../images/timeline/splitCenter.png) repeat-y;width:5px; height:100%;position: absolute;right:196px;z-index: 4; cursor:e-resize;}
.FragsZoom .splitLeft:before,.FragsZoom .splitRight:before {position:absolute;content:"";background:url(../images/timeline/splitTop.png) no-repeat;width:17px;height:19px;left: -4px;top: -5px;}
.FragsZoom .splitLeft:after,.FragsZoom .splitRight:after {position:absolute;content:"";background:url(../images/timeline/splitBottom.png) no-repeat;width:17px;height:19px;left: -4px;bottom: -4px;}
.FragsZoom .splitRight:before,.FragsZoom .splitRight:after {left:-8px;}

.FragsZoom .splitLeft.select{background:url(../images/timeline/splitCenterLSelect.png) repeat-y;}
.FragsZoom .splitRight.select{background:url(../images/timeline/splitCenterSelect.png) repeat-y;}
.FragsZoom .splitLeft.select:before,.FragsZoom .splitRight.select:before{background:url(../images/timeline/splitTopSelect.png) no-repeat;}
.FragsZoom .splitLeft.select:after,.FragsZoom .splitRight.select:after{background:url(../images/timeline/splitBottomSelect.png) no-repeat;}

.FragsZoom .arrow {width:13px;height:100%;cursor:pointer;position:absolute;z-index: 9;}
.FragsZoom .arrow.L {background:url(../images/timeline/left.png) no-repeat center center;left:6px;}
.FragsZoom .arrow.R{background:url(../images/timeline/right.png) no-repeat center center;right:6px;}
/*end 时间轴样式*/

.timeLineContainer{font-size:12px; font-family:"微软雅黑";height: 100%;width: 104%;}
.timeLineContainer .leftArrows,.timeLineContainer .rightArrows{width:25px; height:41px; float:left; background-color:#e1e2e7; cursor:pointer;}
.timeLineContainer .leftArrows.select,.timeLineContainer .rightArrows.select{ background-color:#4A89DC;}
.timeLineContainer .leftArrows span{background:url(../images/timeline/leftArrows.png) no-repeat center; width: 25px;height: 42px; display:inline-block;}
.timeLineContainer .rightArrows span{background:url(../images/timeline/RightArrows.png) no-repeat center;width: 25px;height: 42px;display:inline-block;}

.FragsZoom .tipContainer{position:absolute;height: 30px;top: 140px; display:none; z-index:1000;}
.FragsZoom .tipContainer .warpLeft{background:url(../images/timeline/tipBack.png) no-repeat left -3px; height:25px;}
.FragsZoom .tipContainer .warpRight{background:url(../images/timeline/tipBack.png) no-repeat right -63px; height:25px; margin-left:7px;}
.FragsZoom .tipContainer .warpInner{background:url(../images/timeline/tipBack.png) repeat-x left -33px; height:25px; margin-right:7px;  color:#FFFFFF;padding-top: 3px;white-space: nowrap;}
.FragsZoom .tipContainer .tipTineBack{ background:url(../images/timeline/tipTineBack.png) no-repeat center;width:100%; height:5px;margin-top: -2px;}

.FragsZoom .tipContainer.select{position:absolute;height: 30px;top: 140px; display:none; z-index:1000;}
.FragsZoom .tipContainer.select .warpLeft{background:url(../images/timeline/tipBackSelect.png) no-repeat left -4px; height:25px;}
.FragsZoom .tipContainer.select .warpRight{background:url(../images/timeline/tipBackSelect.png) no-repeat right -62px; height:25px; margin-left:7px;}
.FragsZoom .tipContainer.select .warpInner{background:url(../images/timeline/tipBackSelect.png) repeat-x left -33px; height:25px; margin-right:7px;  color:#FFFFFF;padding-top: 3px;}
.FragsZoom .tipContainer.select .tipTineBack{ background:url(../images/timeline/tipTineBackSelect.png) no-repeat center;width:100%; height:5px;margin-top: -2px;}

.timeLineContainer .tipLeftText,.timeLineContainer .tipRightText{ position:absolute; color:#5d9cec; z-index:1000;}
.clearBoth:before,.clearBoth:after{ content:""; clear:both; display:inline-block;}
/*
.FragsZoom{position: absolute; border: 1px solid #E8E8E8;width: 100%;height: 100%;}
.FragsZoom .zoomLeft,.FragsZoom .zoomRight {position: absolute;background: #CCC;z-index: 3;opacity: 0.5;width:300px; height:100%;}
.FragsZoom.black .zoomLeft,.FragsZoom.black .zoomRight{background: #222122;}
.FragsZoom .zoomCenter{position: absolute;z-index: 3; height:100%; cursor:pointer;}
.FragsZoom .zoomLeft{ left:0;}
.FragsZoom .zoomRight{ right:0;}
.FragsZoom .splitLeft{background:url(../images/splitLeft.jpg) no-repeat;width:6px; height:40px;position: absolute;left: 300px;z-index: 3; cursor:e-resize;}
.FragsZoom .splitRight{background:url(../images/splitRight.jpg) no-repeat;width:6px; height:40px;position: absolute;right: 300px;z-index: 3; cursor:e-resize;}
.FragsZoom .zoomContent{width: 100%;height: 100%;}

.FragsZoom .splitLeft{background:url(../images/timeline/splitCenterL.png) repeat-y;width:4px; height:100%;position: absolute;left:296px;z-index: 3; cursor:e-resize;}
.FragsZoom .splitRight{background:url(../images/timeline/splitCenter.png) repeat-y;width:4px; height:100%;position: absolute;right:296px;z-index: 3; cursor:e-resize;}
.FragsZoom .splitLeft:before,.FragsZoom .splitRight:before {position:absolute;content:"";background:url(../images/timeline/splitTop.png) no-repeat;width:9px;height:12px;left: -3px;top: 0;}
.FragsZoom .splitLeft:after,.FragsZoom .splitRight:after {position:absolute;content:"";background:url(../images/timeline/splitBottom.png) no-repeat;width:9px;height:12px;top: 83%;left: -3px;}
.FragsZoom .splitLeft:before,.FragsZoom .splitLeft:after {left:0;}

.FragsZoom .arrow {width:13px;height:100%;cursor:pointer;position:absolute;z-index: 9;}
.FragsZoom .arrow.L {background:url(../images/timeline/left.png) no-repeat center center;left:6px;}
.FragsZoom .arrow.R{background:url(../images/timeline/right.png) no-repeat center center;right:6px;}*/

